<template>
    <div id="accountdata">
        <el-form
          :model="accountdata"
        >
          <el-row class="basic">
            <p class="title">账号设置</p>
            <div class="content" v-if="!showeditaccount">
                <div class="conDiv">
                    <p class="left" style="display: inline-block; padding-left: 0px">
                        <span class="font2">登陆密码</span>
                        <span class="font3"></span>
                    </p>
                    <el-button icon="el-icon-edit" size="small" @click="showedit" class="font7">编辑</el-button>
                </div>
                <p>
                    <span class="font2">手机号码</span>
                    <span class="font3">{{accountdata.phone}}</span>
                </p>
                <p>
                    <span class="font2">邮箱地址</span>
                    <span class="font3">{{accountdata.email}}</span>
                </p>
            </div>
            <div class="content" v-if="showeditaccount">
                <el-form
                    :model="accountdata"
                    ref="accountdata"
                    :rules="rules"
                    :inline="true"
                    label-width="120px"
                    style="width: 90%; height: 35vh; backgroundColor: rgba(236,238,239); padding-top: 3vh"
                >
                    <el-row>
                        <el-form-item label="手机号码" prop="phone" class="font4">
                          <el-input v-model="accountdata.phone" class="font5"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="手机号码" prop="phone" class="font4">
                          <el-input v-model="accountdata.phone" class="font5"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="邮箱地址" prop="email" class="font4">
                          <el-input v-model="accountdata.email" class="font5"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                      <el-form-item style="width: 75%; display: block; text-align: right">
                        <el-button style="margin-right: 40%; font: 18px '宋体'" @click="canceledit">取消 </el-button>
                        <el-button type="primary" @click="confirmedit" style="font: 18px '宋体'">保存</el-button>
                      </el-form-item>
                    </el-row>
                </el-form>
            </div>
          </el-row>
        </el-form>
    </div>
</template>

<script>
import { validatePhone, validateEMail } from '../../utils/rules'
import { getTime } from '../../utils/common'
export default {
  name: 'AccountData',
  data() {
    return {
      accountdata: {},
      proform: {},
      showeditaccount: false,
      rules: {
        phone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
          { validator: validatePhone, message: '请输入正确的电话号码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
          { validator: validateEMail, message: '请输入正确的邮箱', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getaccountdata()
  },
  methods: {
    // 获取登录的用户信息
    getaccountdata() {
      var user = JSON.parse(window.sessionStorage.getItem('user'))
      this.accountdata = user
    },
    // 显示修改页面
    showedit() {
      this.showeditaccount = true
    },
    // 转换表单
    Formconversion() {
      this.proform = {
        id: this.accountdata.id,
        name: this.accountdata.name,
        gender: this.accountdata.gender,
        birthday: getTime(this.accountdata.birthday),
        idCard: this.accountdata.idCard,
        wedlock: this.accountdata.wedlock,
        nationId: this.accountdata.nationId,
        nativePlace: this.accountdata.nativePlace,
        politicId: this.accountdata.politicId,
        email: this.accountdata.email,
        phone: this.accountdata.phone,
        address: this.accountdata.address,
        departmentId: this.accountdata.departmentId,
        jobLevelId: this.accountdata.jobLevelId,
        posId: this.accountdata.posId,
        engageForm: this.accountdata.engageForm,
        tiptopDegree: this.accountdata.tiptopDegree,
        specialty: this.accountdata.specialty,
        school: this.accountdata.school,
        beginDate: this.accountdata.beginDate,
        workState: this.accountdata.workState,
        workId: this.accountdata.workId,
        contractTerm: this.accountdata.contractTerm,
        conversionTime: this.accountdata.conversionTime,
        beginContract: this.accountdata.beginContract,
        endContract: this.accountdata.endContract
      }
    },
    // 确定修改
    confirmedit(index) {
      // 隐藏修改
      this.showeditaccount = false
      this.Formconversion()
      // 提交修改
      this.putRequest('/admin/emp', this.proform).then(resp => {
        if (resp) {
          console.log(resp.msg)
          // 获取修改后的当前用户信息
          this.getRequest('/admin/emp').then(resp => {
            if (resp) {
              var user = JSON.parse(window.sessionStorage.getItem('user'))
              resp.data.forEach(item => {
                if (item.id === user.id) {
                  window.sessionStorage.setItem('user', JSON.stringify(item))
                  this.accountdata = item
                  console.log(this.accountdata)
                  this.$forceUpdate()
                }
              })
            }
          }, error => console.log(error))
        }
      }, error => console.log(error))
    },
    // 取消修改
    canceledit() {
      this.showeditaccount = false
      this.getaccountdata()
    }
  }
}
</script>

<style scoped>
#accountdata {
  display: inline-block;
  width: 100%;
  padding: 5px;
}
#accountdata .el-form {
  width: 105%;
  height: 87vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.el-form .content .conDiv {
  display: flex;
  justify-content: space-between;
  width: 92%;
}
.el-form .content:hover .conDiv >.el-button{
  display: block;
  background-color: rgba(236,238,239);
}
.el-form .content .conDiv .el-button {
  display: inline-block;
  border: none;
  display: none;
}
.el-form .font1 {
  color: #606266;
  font: 18px '宋体';
  margin-top: 8px;
}
.el-form .font2 {
  display: inline-block;
  width: 80px;
  text-align: right;
  color: #606266;
  font: 18px '宋体';
  margin-bottom: 25px;
}
.el-form .font3 {
  display: inline-block;
  width: 200px;
  text-align: center;
  color: #606266;
  font: 18px '宋体';
  margin-bottom: 25px;
}
.el-form #basic {
  width: 100%;
}
.el-form .title {
  font: 24px '宋体';
  font-weight: bolder;
  margin: 1vh 1vw;
}
.el-form .content {
  width: 100%;
  padding-left: 2vw;
  padding-top: 15px;
}
.el-form .content:hover {
  background-color: #ECEEEF;
}
/** 表单的标签文本样式 */
.content .demo-form-inline .el-row .el-form-item {
  width: 50%;
}
.font4 /deep/ .el-form-item__label{
  width: 40%;
  color: #606266;
  font: 18px '宋体';
  padding-top: 5px;
}
.font5 /deep/ .el-input__inner {
  width: 170%;
  color: #606266;
  font: 18px '宋体';
}
.font7 {
  color: #606266;
  font: 18px '宋体';
}
.font7:hover {
  color: #409EFF;
}
</style>
